<!-- 详情 -->
<template>
  <div class="drawer-layouts">
    <el-drawer
      :title="detailTitle"
      :visible.sync="drawer"
      @closed="closedinvitation"
      size="85%"

    >
      <div class="layout" style="position: relative" v-loading="loading">
        <el-form
          label-position="left"
          :inline="true"
          size="small"
          :model="recruitingFrom"
          :rules="recruitingRules"
          ref="recruiting"
        >
          <el-tabs v-model="activeName">
            <el-tab-pane label="活动基本配置" name="first">
              <div class="blockquote-box">基本信息</div>
              <div class="form-box">
                <el-form-item
                  label="活动名称"
                  prop="activity_name"
                  class="form-box-item"
                >
                  <el-input
                    clearable
                    maxlength="20"
                    show-word-limit
                    placeholder="请输入活动名称"
                    v-model="recruitingFrom.activity_name"
                  >
                  </el-input>
                </el-form-item>
                <el-form-item
                  label="活动时间"
                  prop="recruitingTime"
                  class="form-box-item"
                >
                  <el-date-picker
                    clearable
                    value-format="yyyy-MM-dd"
                    @change="recruitingTimeChange"
                    v-model="recruitingTime"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="请选择开始时间"
                    end-placeholder="请选择结束时间"
                  >
                  </el-date-picker>
                </el-form-item>
                <!-- <el-form-item
                  label="活动状态"
                  prop="status"
                  class="form-box-item"
                >
                  <el-select v-model="basic.status" placeholder="请选择状态">
                    <el-option
                      v-for="item in status"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    >
                    </el-option>
                  </el-select>
                </el-form-item> -->
              </div>
              <div class="blockquote-box">邀请海报</div>
              <div class="form-box">
                <el-row :gutter="10">
                  <el-col :xs="12" :sm="12" :md="14" :lg="14" :xl="14">
                    <el-form-item label="邀请海报" class="form-box-item">
                      <logo-upload
                        :single-file="poster"
                        :show-file-list="false"
                        accept="image/jpeg, image/png"
                        @uploadCallback="posterBack"
                      />
                      <div class="form-tip">
                        仅支持.jpg、.png、.jpeg 格式，海报大小100px*100px；
                      </div>
                    </el-form-item>
                  </el-col>
                  <el-col :xs="12" :sm="12" :md="10" :lg="10" :xl="10">
                    <div class="placard-box">
                      <div class="placard-title">默认海报示例</div>
                      <div>
                        <el-image
                          :src="
                            recruitingFrom.poster
                              ? recruitingFrom.poster
                              : require('@/assets/images/invite.png')
                          "
                          style="
                            width: 350px;
                            height: 420px;
                            border-radius: 6px;
                          "
                        />
                      </div>
                      <div class="placard-tip">
                        1.
                        海报页面会展示邀请人和邀请码信息，为不影响海报的美观度，在设计海报时请注意邀请信息的展示；
                        <br />2.
                        邀请信息为系统默认生成，设计海报时无需设计邀请相关信息；
                        <br />3. 不上传邀请海报，则以默认海报为主；
                      </div>
                    </div>
                  </el-col>
                </el-row>
              </div>
              <el-divider></el-divider>
              <div class="button-box">
                <el-button
                  @click="basic_information('basic', 'second')"
                  class="next-button"
                  >下一步 <i class="el-icon-caret-right el-icon--right"></i
                ></el-button>
              </div>
            </el-tab-pane>
            <el-tab-pane label="适用范围" name="second">
              <div class="blockquote-box">适用范围</div>
              <div class="form-box">
                <el-form-item label="适用区域" class="form-box-item">
                  <el-cascader
                    filterable
                    @change="regionChangeWay"
                    v-model="recruitingFrom.appoint_area_select_json"
                    style="width: 100%"
                    :options="regionList"
                    collapse-tags
                    :props="{
                      expandTrigger: 'hover',
                      multiple: true,
                      value: 'id',
                      label: 'name',
                      children: 'children',
                      checkStrictly: false,
                      emitPath: true,
                    }"
                    clearable
                  ></el-cascader>
                  <!-- <el-cascader
                    @change="regionChangeWay"
                    v-model="recruitingFrom.appoint_area_select"
                    style="width: 100%"
                    :options="regionList"
                    collapse-tags
                    :props="{
                      multiple: true,
                      value: 'id',
                      label: 'name',
                      children: 'children',
                      checkStrictly: true,
                    }"
                    clearable
                  ></el-cascader> -->
                </el-form-item>
                <el-form-item label="用户分组" class="form-box-item">
                  <el-select
                    @change="selectChangeWay('appoint_group_select')"
                    v-model="recruitingFrom.appoint_group_select"
                    multiple
                    clearable
                    collapse-tags
                    placeholder="请选用户分组"
                  >
                    <el-option
                      v-for="item in groupingList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="用户等级" class="form-box-item">
                  <el-select
                    @change="selectChangeWay('appoint_level_select')"
                    v-model="recruitingFrom.appoint_level_select"
                    multiple
                    clearable
                    collapse-tags
                    placeholder="请选用户等级"
                  >
                    <el-option
                      v-for="item in gradeList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="用户标签" class="form-box-item">
                  <el-select
                    clearable
                    @change="selectChangeWay('appoint_tag_select')"
                    style="width: 100%"
                    v-model="recruitingFrom.appoint_tag_select"
                    multiple
                    collapse-tags
                    placeholder="请选择标签"
                  >
                    <el-option-group
                      v-for="group in TagCategoryAll"
                      :key="group.category_name"
                      :label="group.category_name"
                    >
                      <el-option
                        v-for="item in group.child"
                        :key="item.id"
                        :label="item.tag_name"
                        :value="item.id"
                      >
                      </el-option>
                    </el-option-group>
                  </el-select>
                </el-form-item>
              </div>
              <div class="blockquote-box">可参与活动的用户</div>
              <div class="form-box">
                <div class="table-top">
                  <div class="table-top-left">
                    <div>所有用户：{{ rangeCanJoinUsertotal }}</div>
                    <div>黑名单用户：{{ joinblackIds.length }}</div>
                    <div>重复用户：{{ rangeHasJoinUserTotal }}</div>
                  </div>
                  <div class="table-top-right">
                    <div>
                      <el-button
                        style="height: 30px"
                        type="primary"
                        @click="addConfig('黑名单')"
                        plain
                        size="small"
                        >配置黑名单</el-button
                      >
                    </div>
                    <div>
                      <el-button
                        style="height: 30px"
                        type="primary"
                        @click="addConfig('重复对象')"
                        plain
                        size="small"
                        >配置重复</el-button
                      >
                    </div>
                  </div>
                </div>
                <div>
                  <el-table
                    v-loading="rangeCanJoinUserLoading"
                    highlight-current-row
                    :data="CanJoinUserList"
                    :header-cell-style="{
                      'background-color': '#f3f8fe',
                      color: '#606266',
                      height: '50px',
                    }"
                    style="width: 100%"
                  >
                    <el-table-column
                      align="center"
                      prop="id"
                      label="用户id"
                    ></el-table-column>
                    <el-table-column
                      align="center"
                      prop="nickname"
                      label="用户昵称"
                    ></el-table-column>
                    <el-table-column
                      align="center"
                      prop="region"
                      label="用户区域"
                    >
                      <template slot-scope="scope">
                        {{
                          scope.row.province_name
                            ? scope.row.province_name
                            : "-"
                        }}
                        {{ scope.row.city_name ? scope.row.city_name : "-" }}
                      </template>
                    </el-table-column>
                    <el-table-column
                      width="200"
                      align="center"
                      prop="group"
                      label="用户群组"
                    >
                      <template slot-scope="scope">
                        <!-- 用户群组：提示多个群组需要用分隔符区分，‘空格’+‘/’,超过三个显示超过的数量 -->
                        <el-tooltip
                          class="item"
                          effect="dark"
                          :content="scope.row.group_name"
                          placement="top"
                        >
                          <div
                            v-if="scope.row.group_name"
                            style="display: flex; justify-content: center"
                          >
                            <div>{{ scope.row.group_name }}</div>
                          </div>
                        </el-tooltip>
                        <div v-if="!scope.row.group_name">-</div>
                      </template>
                    </el-table-column>
                    <el-table-column
                      width="200"
                      align="center"
                      prop="tag"
                      label="用户标签"
                    >
                      <template slot-scope="scope">
                        <!-- 用户群组：提示多个群组需要用分隔符区分，‘空格’+‘/’,超过三个显示超过的数量 -->
                        <el-tooltip
                          class="item"
                          effect="dark"
                          :content="scope.row.tag_name.join('/')"
                          placement="top"
                        >
                          <div
                            v-if="scope.row.tag_name.length !== 0"
                            style="display: flex; justify-content: center"
                          >
                            <div
                              v-if="index < 3"
                              v-for="(item, index) in scope.row.tag_name"
                              :key="index"
                            >
                              {{ item }} /
                            </div>
                            <div
                              v-if="scope.row.tag_name.length > 3"
                              class="table-num"
                            >
                              + {{ scope.row.tag_name.length }}
                            </div>
                          </div>
                        </el-tooltip>
                        <div v-if="scope.row.tag_name.length == 0">-</div>
                      </template>
                    </el-table-column>
                    <el-table-column
                      align="center"
                      prop="status"
                      label="参与活动状态"
                    ></el-table-column>
                    <el-table-column
                      fixed="right"
                      width="100"
                      prop="address"
                      label="操作"
                      align="center"
                    >
                      <template slot-scope="scope">
                        <el-button type="text" @click="joinblack([scope.row])">
                          加入黑名单
                        </el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                  <pagination
                    v-show="rangeCanJoinUsertotal > 0"
                    :total="rangeCanJoinUsertotal"
                    :page.sync="rangeCanJoinUserSearch.page"
                    :limit.sync="rangeCanJoinUserSearch.count"
                    @pagination="getRangeCanJoinUserListWay"
                  />
                </div>
              </div>
              <el-divider></el-divider>
              <div class="button-box">
                <el-button
                  @click="activeName = 'first'"
                  icon="el-icon-caret-left"
                  class="next-button"
                  >上一步</el-button
                >
                <el-button @click="activeName = 'third'" class="next-button"
                  >下一步 <i class="el-icon-caret-right el-icon--right"></i
                ></el-button>
              </div>
            </el-tab-pane>
            <el-tab-pane label="拉新规则" name="third">
              <el-alert
                style="margin: 20px 0;"
                title="奖励说明:"
                type="warning"
                :closable="false"
              >
                拉新活动的被邀请人为平台新用户，在设置被邀请人奖励时需要注意平台是否已经创建<span
                  class="Instructions-important"
                  >新人礼</span
                >活动；若已创建新人礼活动，则同一个新用户会发放两个奖励（即新人礼奖励和被邀请人奖励），为保障运营成本，设置被邀请人奖励时请记得参考<span
                  class="Instructions-important"
                  >新人礼</span
                >活动的奖励配置哦~
              </el-alert>
              <div class="blockquote-box">活动规则</div>

              <div>
                <div class="form-box">
                  <el-form-item label="配置条件" class="form-box-item">
                    <el-button
                      type="primary"
                      style="height: 30px"
                      @click="addProductConfig('配置商品')"
                      >配置指定商品({{
                        this.reward_task_goods_ids.length
                      }})</el-button
                    >
                  </el-form-item>
                  <div>
                    <el-form-item
                      label="分佣到账时间节点设置"
                      required
                      class="orm-box-item"
                      prop="node"
                    >
                    <el-select v-model="recruitingFrom.node" placeholder="请选择">
                      <el-option
                        v-for="item in mouchoptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                      </el-option>
                    </el-select>
                    </el-form-item>
                    <el-form-item  class="form-box-item">
                              积分转化卡领取后
                              <el-input
                                @focus="FocusRow()"
                                @blur="BlurRow()"
                                @input="handleInput"
                                placeholder="天数"
                                v-model.number="recruitingFrom.validity_day"
                                style="width: 80px"
                              ></el-input>
                              天内有效
                              <span style="font-size: 12px; color: #a3a3a3">
                                &nbsp;&nbsp;输入0或不填为永久有效
                              </span>
                            </el-form-item>
                  </div>

                  <div
                    class="order-box"
                    v-for="(order, index) in recruitingFrom.activity_rule"
                    :key="index + 'activity_rule'"
                  >
                    <el-form-item
                      label="消费订单"
                      required
                      class="numbox form-box-item"
                    >
                      <el-radio-group v-model="order.range_type">
                        <el-radio :label="1">固定单数</el-radio>
                        <el-radio :label="2">订单区间</el-radio>
                      </el-radio-group>
                      <div style="margin-left: 30px">
                        第
                        <el-input-number
                          v-model="order.range_min"
                          :prop="'orders.' + index + '.range_min'"
                          controls-position="right"
                          :min="elInputNumberMin(order, index)"
                          @change="
                            (currentValue, oldValue) =>
                              numChange(currentValue, oldValue, order, index)
                          "
                        ></el-input-number>
                        <span
                          v-if="order.range_type == 1"
                          style="margin-left: 5px"
                          >单</span
                        >
                        <span v-else style="margin-left: 30px">-</span>
                      </div>
                      <div
                        style="margin-left: 30px"
                        v-if="order.range_type == 2"
                      >
                        <el-input-number
                          v-model="order.range_max"
                          :prop="'orders.' + index + '.range_max'"
                          controls-position="right"
                          :min="order.range_min + 1"
                          @change="
                            (currentValue, oldValue) =>
                              numChange(currentValue, oldValue, order, index)
                          "
                        ></el-input-number>
                        单
                      </div>
                      <div
                        style="margin-left: 50px"
                        v-if="
                          index == recruitingFrom.activity_rule.length - 1
                        "
                      >
                        <el-button
                          type="primary"
                          icon="el-icon-plus"
                          circle
                          @click="addOrder"
                        ></el-button>
                        <el-button
                          icon="el-icon-minus"
                          circle
                          @click="removeOrder(order)"
                          v-if="index !== 0"
                        ></el-button>
                        （说明：点击+，此模块重复一次，可以单独配置）
                      </div>
                    </el-form-item>
                    <div class="form-box">
                      <el-tabs>
                        <el-tab-pane
                          v-for="(invite, indexs) in order.inviteArr"
                          :key="indexs + 'inviteArr'"
                          :label="indexs == 0 ? '邀请人奖励' : '被邀请人奖励'"
                        >
                        <div v-if="indexs == 0">
                          <div style="margin-top:20px;display:inline-block;" class="Instructions-important">分佣公式设置</div>
                          <span style="font-size: 14px;">（说明：分佣结果为<span class="text-red">现金</span>，转到用户<span class="text-red">账户余额</span>，并<span class="text-red">生成记录</span>）</span>
                          <div style="margin-top:20px">
                            <el-form-item label="CO=CA*N%"> </el-form-item>
                            <el-form-item label="直推分佣比例设置："
                           :prop="
                             'activity_rule.' +
                             index +
                             '.inviteArr.' +
                             indexs +
                             '.direct_rate'
                           "
                            :rules="{
                              required: true,
                              validator: quantity,
                              trigger: 'change',
                            }"
                            >
                              <el-input style="width: 120px;" placeholder="百分比" v-model.number="invite.direct_rate" />
                              <div class="form_text">%</div>
                            </el-form-item>
                            <el-form-item style="margin-left:30px" label="间推分佣比例设置："
                            :prop="
                              'activity_rule.' +
                              index +
                              '.inviteArr.' +
                              indexs +
                              '.indirect_rate'
                            "
                             :rules="{
                               required: true,
                               validator: quantity,
                               trigger: 'change',
                             }"
                            >
                              <el-input style="width: 120px;" v-model.number="invite.indirect_rate" placeholder="百分比" />
                              <div class="form_text">%</div>
                            </el-form-item>
                          </div>
                          <div class="text-explain">
                          <div class="Instructions-important">公式说明：</div>
                          <p>1、CO代表积分转化卡；</p>
                          <p>2、CA代表商品中实际支付现金额度； </p>
                          <p>3、N 代表分佣比例； </p>
                          </div>
                        </div>
                          <el-form-item
                          v-if="indexs == 1"
                            class="form-box-item"
                            style="margin-top: 20px"
                          >
                            <el-checkbox-group
                              v-model="invite.reward_type"
                              size="small"
                            >
                              <el-checkbox
                                label="2"
                              >
                              积分
                            </el-checkbox>
                              <el-checkbox
                                label="3"
                              >
                              提货券
                            </el-checkbox>
                              <el-checkbox
                                label="1"
                              >
                              余额
                            </el-checkbox>
                              <el-checkbox
                                label="4"
                              >
                              积分转换卡
                            </el-checkbox>
                            </el-checkbox-group>
                          </el-form-item>
                          <div v-if="indexs == 1">
                            <el-form-item
                              v-if="invite.reward_type.includes('2')"
                              label="赠送积分"
                              :prop="
                                'activity_rule.' +
                                index +
                                '.inviteArr.' +
                                indexs +
                                '.integral_num'
                              "
                              :rules="{
                                required: true,
                                validator: quantity,
                                trigger: 'change',
                              }"
                              class="form-box-item"
                            >
                              <el-input
                                placeholder="请输入赠送积分数量"
                                v-model.number="invite.integral_num"
                              >
                              </el-input>
                            </el-form-item>
                            <el-form-item
                              v-if="invite.reward_type.includes('3')"
                              label="赠送提货券"
                              :prop="
                                'activity_rule.' +
                                index +
                                '.inviteArr.' +
                                indexs +
                                '.voucher_num'
                              "
                              :rules="{
                                required: true,
                                validator: quantity,
                                trigger: 'change',
                              }"
                              class="form-box-item"
                            >
                              <el-input
                                placeholder="请输入赠送提货券数量"
                                v-model.number="invite.voucher_num"
                              >
                              </el-input>
                            </el-form-item>
                            <el-form-item
                              v-if="invite.reward_type.includes('1')"
                              label="赠送余额"
                              :prop="
                                'activity_rule.' +
                                index +
                                '.inviteArr.' +
                                indexs +
                                '.balance_num'
                              "
                              :rules="{
                                required: true,
                                validator: quantity,
                                trigger: 'change',
                              }"
                              class="form-box-item"
                            >
                              <el-input
                                placeholder="请输入赠送余额"
                                v-model.number="invite.balance_num"
                              >
                              </el-input>
                            </el-form-item>
                            <el-form-item
                              v-if="invite.reward_type.includes('4')"
                              label="积分转换卡"
                              :prop="
                                'activity_rule.' +
                                index +
                                '.inviteArr.' +
                                indexs +
                                '.conversion_rate'
                              "
                              :rules="{
                                required: true,
                                validator: quantity,
                                trigger: 'change',
                              }"
                              class="form-box-item"
                            >
                              <el-input
                                placeholder="请输入0-100数值"
                                v-model.number="invite.conversion_rate"
                              >
                              </el-input>
                              <span style="margin-left: 6px;">%</span>
                            </el-form-item>
                          </div>
                        </el-tab-pane>
                      </el-tabs>
                    </div>
                  </div>
                </div>
              </div>

              <el-divider></el-divider>
              <div class="button-box">
                <el-button
                  @click="activeName = 'third'"
                  icon="el-icon-caret-left"
                  class="next-button"
                  >上一步</el-button
                >
                <el-button @click="activeName = 'fourth'" class="next-button"
                  >下一步 <i class="el-icon-caret-right el-icon--right"></i
                ></el-button>
              </div>
            </el-tab-pane>
            <el-tab-pane label="活动说明" name="fourth">
              <div class="blockquote-box">活动简介&规则说明</div>
              <div class="form-box">
                <el-form-item
                  label="活动简介"
                  prop="description"
                  class="form-box-item"
                >
                  <el-input
                    type="textarea"
                    style="width: 727px"
                    :rows="5"
                    placeholder="请输入内容"
                    v-model="recruitingFrom.description"
                  >
                  </el-input>
                </el-form-item>
                <el-form-item
                  label="规则说明"
                  prop="explain"
                  class="form-box-item"
                >
                  <editor-text
                    v-model="recruitingFrom.explain"
                    :height="240"
                    @input="editorclick"
                  />
                </el-form-item>
              </div>
              <el-divider></el-divider>
              <div class="button-box">
                <el-button
                  @click="activeName = 'third'"
                  icon="el-icon-caret-left"
                  class="next-button"
                  >上一步</el-button
                >
                <el-button class="next-button" @click="saveSubmit"
                  >保存</el-button
                >
              </div>
            </el-tab-pane>
          </el-tabs>
        </el-form>
      </div>
    </el-drawer>
    <!-- 配置抽屉 -->
    <config
      ref="config"
      v-if="ifShowConfig"
      :userIds="userIds"
      :regionList="regionList"
      :groupingList="groupingList"
      :TagCategoryAll="TagCategoryAll"
      :gradeList="gradeList"
      :ConfigTitle="ConfigTitle"
    />
    <productConfig
      v-if="ifShowProductConfig"
      :goodsType="goodsType"
      :goodsIdArr="reward_task_goods_ids"
      :goodsIdsRowList="reward_task_goods_ids_row"
      :configuration="{
        total_num: total_num,
        gif_num: gif_num,
      }"
      :productConfigTitle="productConfigTitle"
    ></productConfig>
  </div>
</template>
<script>
// 引入
import config from "../demo/config";
import productConfig from "../demo/productConfig";
import LogoUpload from "@/components/FileUpload";

import { rangeCanJoinUserList, rangeHasJoinUserList } from "@/api/index";
import {
  addNewSupplier,
  getSupplierdetail,
} from "@/api/recruitment/index";
export default {
  name: "detail",
  props: [
    "detailTitle",
    "regionList",
    "gradeList",
    "TagCategoryAll",
    "groupingList",
  ],
  components: {
    config,
    productConfig,
    LogoUpload,
  },

  data() {
    return {
      nodenimber:"",
      mouchoptions: [{
          value: 1,
          label: '确认收货后'
        }, {
          value: 2,
          label: '评价后'
        }, {
          value: 3,
          label: '售后过期后'
        }],
      id: "",
      drawer: true,
      detailtitle: "",
      activeName: "first",
      recruitingFrom: {
        validity_day:0,
        activity_name: "", // 活动名称
        start_time: "", // 开始时间（立即生效请传空字符串） 2023-10-11 13:00:00
        end_time: "", // 结束时间 （永久有效请传空字符串）2023-10-11 13:00:00
        status: 2, // 状态:-1结束 1开启 2关闭 3进行中
        sort: "", // 排序默认：0
        node:"",//佣金到账时间
        poster: "", // 活动图片
        description: "", //活动简介
        explain: "", // 活动说明
        appoint_area_select_json: [],
        appoint_area_select: [],
        appoint_level_select: [],
        appoint_group_select: [],
        appoint_tag_select: [],
        user_black: [],
        reward_task_goods_ids: [], // 任务商品，指定的商品可以参与活动，多个商品以,分开。（任务消费有此参数）
       // 邀请奖励
        activity_rule: [
          {
            range_type: 1,
            range_min: "",
            range_max: "",
            inviteArr: [
              {
                direct_rate:null,//直推分佣比例
                indirect_rate:null, //间接分佣比例
              },
              {
                reward_type: [], //
                balance_num: "", //【消费奖励】邀请人 - 奖励金额（元）
                integral_num: "", //【消费奖励】邀请人 - 奖励积分（元）
                voucher_num: "", //【消费奖励】邀请人 - 奖励提货券（元）
                conversion_rate: "", //【消费奖励】邀请人 - 积分转提货券比例，百分比（例：1.5，代表1.5%，精确到二位小数）
              },
            ],
          },
        ],
        reward_object_from_consume: [], // 【消费奖励】邀请人
        reward_object_to_consume: [], // 【消费奖励】邀请人
      },
      recruitingTime: [], // 活动开始结束时间回显
      poster: {}, // 邀请海报回显
      CanJoinUserList: [], // 满足条件的可参与用户列表
      userIds: [], // 所配置的黑名单用户用来动态传参
      dataListConfig: [], //   适用范围传递的数据
      joinblackIds: [], // 黑名单列表
      inviter_rewards: ["邀请人奖励", "被邀请人奖励"], // 邀请人奖励和被邀请人奖励是否开启
      validity_period: 0, // 转化卡领取后多少天有效
      reward_task_goods_ids: [], // 任务商品数组
      reward_task_goods_ids_row: [], // 任务商品数组
      total_num: 0,
      gif_num: 0,
      goodsType: "购买商品",
      recruitingRules: {
         node: [{ required: true, message: '请选择分佣到账时间节点', trigger: 'change' }],
        activity_name: [
          {
            required: true,
            validator: (rule, value, callback) => {
              let req = /[^0-9a-zA-Z\u4e00-\u9fa5]/g;
              if (!value) {
                callback(new Error("请输入活动名称"));
              } else {
                if (req.test(value)) {
                  callback(new Error("活动名称中不能存在特殊字符"));
                } else {
                  callback();
                }
              }
            },
            trigger: "change",
          },
        ],
        recruitingTime: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (this.recruitingTime.length == 0) {
                return callback(new Error("请选择活动的时间段"));
              } else {
                callback();
              }
            },
            trigger: "change",
          },
        ],
        inviter_rewards: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (this.inviter_rewards.length == 0) {
                return callback(new Error("请选择奖励对象"));
              } else {
                callback();
              }
            },
            trigger: "change",
          },
        ],
        validity_period: [
          {
            required: false,
            validator: (rule, value, callback) => {
              let req = /\D/g;
              if (this.validity_period == "" || this.validity_period == 0) {
                return callback();
              }
              if (req.test(this.validity_period)) {
                callback(new Error("只能为数字,且只能为整数"));
              } else {
                callback();
              }
            },
            trigger: "change",
          },
        ],
        // reward_task_goods_ids: [
        //   {
        //     required: true,
        //     validator: (rule, value, callback) => {
        //       if (this.reward_task_goods_ids.length !== 0) {
        //         return callback();
        //       } else {
        //         callback(new Error("请配置指定商品"));
        //       }
        //     },
        //     trigger: "change",
        //   },
        // ],
        description: [
          {
            required: true,
            validator: (rule, value, callback) => {
              let req = /\D/g;
              if (value == "") {
                callback(new Error("请输入活动简介"));
                return;
              } else {
                callback();
              }
            },
            trigger: "change",
          },
        ],
        explain: [
          {
            required: true,
            validator: (rule, value, callback) => {
              let req = /\D/g;
              if (value == "") {
                callback(new Error("请输入规则说明"));
                return;
              } else {
                callback();
              }
            },
            trigger: "change",
          },
        ],
      },
      reward_type: (rule, value, callback) => {
        if (value.length == 0) {
          return callback(new Error("请选择奖励类型"));
        } else {
          callback();
        }
      },
      quantity: (rule, value, callback) => {
        if (value === "") {
          callback(new Error("请输入奖励数值"));
        } else {
          let req = /^\d+(\.\d{1,2})?$/;

          if (req.test(value)) {
            if (rule.field.search("conversion_rate") !== -1 || rule.field.search("direct_rate") !== -1 || rule.field.search("indirect_rate") !== -1) {
              if (Number(value) > 100) {
                callback(new Error("转化率比例不能大于100"));
              } else if (Number(value) < 0) {
                callback(new Error("转化率比例不能小于1"));
              } else {
                callback();
              }
            } else {
              callback();
            }
          } else {
            callback(new Error("只能输入数字,且只能保留两位小数"));
          }
        }
      },
      // 校验
      rangerules: {},
      rangeCanJoinUserSearch: {
        activity_type: 10001, // 活动类型：1=爱心助农;；2=秒杀；3=拼团；4=消费3天全返；5=送积分；6=积分转化提货券；7=好物推荐；8=邀请有礼；10001=抽奖
        remove_activity_id: "", // 需要排除的活动ID（修改活动，需要传当前活动ID）
        appoint_area_select: "", // 选择的地区ID（市ID，多个以,分开）
        appoint_level_select: "", // 选择的用户等级ID（多个以,分开）
        appoint_group_select: "", // 选择的用户分组ID（多个以,分开）
        appoint_tag_select: "", // 选择的用户标签ID（多个以,分开）
        user_black: "", // 黑名单用户ID（多个以,分开）
        page: 1,
        count: 10,
      }, //
      rangeCanJoinUserLoading: false, // 使用范围使用用户列表
      rangeCanJoinUsertotal: 0, // 使用范围使用用户列表总条数
      joinblackList: [], // 黑名单列表
      HasJoinUserList: [], // 重复用户列表
      rangeHasJoinUserTotal: 0, // 重复用户数
      loading: false,

      ifShowConfig: false,
      ConfigTitle: "",
      ifShowProductConfig: false,
      productConfigTitle: "",
      dialogFormVisible: false,
      form: {
        name: "",
        image: "",
      },
      images: [],
      dialogtitle: "",
      image: "",
    };
  },
  mounted() {
    const p5 = new Promise((resolve, reject) => {
      rangeCanJoinUserList(this.rangeCanJoinUserSearch).then((res) => {
        if (res.code !== 200 || res.status !== 1) {
          this.$messages.error(res.msg);
          reject();
          return;
        }
        this.CanJoinUserList = res.data.list;
        this.rangeCanJoinUsertotal = res.data.total;
        resolve();
      });
    });
    const p6 = new Promise((resolve, reject) => {
      rangeHasJoinUserList({ activity_type: 10001 }).then((res) => {
        if (res.code !== 200 || res.status !== 1) {
          this.$messages.error(res.msg);
          reject();
          return;
        }
        this.HasJoinUserList = res.data.list;
        this.rangeHasJoinUserTotal = res.data.total;
        resolve();
      });
    });
    Promise.all([p5, p6])
      .then(() => {})
      .catch(() => {});
  },
  methods: {
      //时间戳转换
      formatTimestamp(timestamp) {
      let date = new Date(timestamp * 1000);
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let day = date.getDate();
      let hours = date.getHours();
      let minutes = date.getMinutes();
      let seconds = date.getSeconds();
      let formattedDateTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
      return formattedDateTime;
    },
    //编辑回显
    getAwardInfoWay(row) {
      this.loading = true;
      this.id = row.id;
      getSupplierdetail({ id: this.id }).then((res) => {
        this.loading = false;
        if (res.code !== 200 || res.status !== 1) {
          this.$messages.error(res.msg);
          return;
        }
        let objRes = res.data;
        this.recruitingFrom.activity_name = objRes.activity_name;
        this.recruitingTime = [objRes.start_time, objRes.end_time];
        this.recruitingFrom.start_time = objRes.start_time;
        this.recruitingFrom.end_time = objRes.end_time;
        this.recruitingFrom.status = objRes.status;

        this.posterBack({ url: objRes.poster });
        this.recruitingFrom.node = objRes.node
        this.regionChangeWay(JSON.parse(objRes.appoint_area_select_json));
        this.recruitingFrom.appoint_group_select = objRes.appoint_group_select;
        this.selectChangeWay("appoint_group_select");
        this.recruitingFrom.appoint_level_select = objRes.appoint_level_select;
        this.selectChangeWay("appoint_level_select");
        this.recruitingFrom.appoint_tag_select = objRes.appoint_tag_select;
        this.selectChangeWay("appoint_tag_select");
        this.joinblackIds = objRes.user_black;
        this.recruitingFrom.validity_day = objRes.validity_day,

        this.recruitingFrom.activity_rule = objRes.activity_rule;

        this.recruitingFrom.activity_rule = this.recruitingFrom.activity_rule.map(item => {
          return {
            range_type: item.range_type,
            range_min: item.range_min,
            range_max: item.range_max,
            id:item.id,
            inviteArr: [
              {
                direct_rate: item.direct_rate, // 直推分佣比例
                indirect_rate: item.indirect_rate, // 间接分佣比例
              },
              {
                reward_type: item.reward_type.split(","),
                balance_num: item.balance_num,
                integral_num: item.integral_num,
                voucher_num: item.voucher_num,
                conversion_rate: item.conversion_rate,
              },
            ],
          };
        });

        this.recruitingFrom.explain = objRes.explain;
        this.recruitingFrom.description = objRes.description;
        var goodsId = objRes.goods_ids;
        if (goodsId.length !== 0) {
          this.reward_task_goods_ids = goodsId.map(Number);
        } else {
          this.reward_task_goods_ids = [];
        }
      });
    },
    // 基本信息点击下一步调用
    basic_information(formName, activeName) {
      this.activeName = activeName;
    },
    // 获取可参与用户列表
    getRangeCanJoinUserListWay() {
      this.rangeCanJoinUserLoading = true;
      rangeCanJoinUserList(this.rangeCanJoinUserSearch).then((res) => {
        this.rangeCanJoinUserLoading = false;
        if (res.code !== 200 || res.status !== 1) {
          this.$messages.error(res.msg);
          return;
        }
        this.CanJoinUserList = res.data.list;
        this.rangeCanJoinUsertotal = res.data.total;
      });
    },
    //打开抽屉
    addConfig(title) {
      this.ifShowConfig = true;
      this.$nextTick(() => {
        if (title == "黑名单") {
          this.userIds = this.joinblackIds;
        } else if (title == "重复对象") {
          this.userIds = this.joinblackIds;
        }
        this.ConfigTitle = title;
      });
    },
    //加入黑名单
    joinblack(row) {
      this.$confirm("确定要将该用户添加到黑名单吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          if (row.length !== 0) {
            row.forEach((item) => {
              this.joinblackIds.push(item.id);
            });
          }
          this.rangeCanJoinUserSearch.user_black = this.joinblackIds.toString();
          this.getRangeCanJoinUserListWay();
          this.$message({
            type: "success",
            message: "添加成功!",
          });
          this.userIds = this.joinblackIds;

          this.$refs.config.getList(this.joinblackIds);
        })
        .catch(() => {});
    },
    // 移除黑名单
    removeBlacklist(row) {
      var _this = this;
      _this
        .$confirm("确定要将用户移出黑名单吗？", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
        .then(() => {
          var arr = [];
          if (row.length !== 0) {
            row.forEach((item) => {
              arr.push(item.id);
            });
          } else {
            arr = [];
          }
          _this.joinblackIds = _this.getArrDifference(arr, _this.joinblackIds);
          _this.rangeCanJoinUserSearch.user_black =
            _this.joinblackIds.toString();
          _this.getRangeCanJoinUserListWay();
          _this.$message({
            type: "success",
            message: "移出成功!",
          });
          _this.userIds = _this.joinblackIds;
          _this.$refs.config.getList(_this.userIds);
        })
        .catch(() => {});
    },
    // 数组排除重复的
    getArrDifference(arr1, arr2) {
      return arr1.concat(arr2).filter(function (v, i, arr) {
        return arr.indexOf(v) === arr.lastIndexOf(v);
      });
    },
    // 下拉框选择调用
    selectChangeWay(name) {
      if (name == "appoint_group_select") {
        this.rangeCanJoinUserSearch.appoint_group_select =
          this.recruitingFrom[name].toString();
      } else if (name == "appoint_level_select") {
        this.rangeCanJoinUserSearch.appoint_level_select =
          this.recruitingFrom[name].toString();
      } else if (name == "appoint_tag_select") {
        this.rangeCanJoinUserSearch.appoint_tag_select =
          this.recruitingFrom[name].toString();
      }
      this.getRangeCanJoinUserListWay();
    },
    // 选择区域调用
    regionChangeWay(val) {
      var arr = [];
      val.forEach((item) => {
        arr.push(item[1]);
      });
      this.recruitingFrom.appoint_area_select_json = val;
      this.rangeCanJoinUserSearch.appoint_area_select = arr.toString();
      this.recruitingFrom.appoint_area_select = arr.toString();
      this.getRangeCanJoinUserListWay();
    },


    // 关闭抽屉
    closedinvitation() {
      this.$parent.closedetail();
    },
    //配置商品
    addProductConfig(title) {
      this.productConfigTitle = title;
      this.ifShowProductConfig = true;
    },
    //关闭子抽屉
    closeConfig() {
      this.ifShowConfig = false;
      this.ifShowProductConfig = false;
    },

    //增加消费订单
    addOrder() {
      this.recruitingFrom.activity_rule.push({
        range_type: 1,
        range_min: null,
        range_max: null,
        validity_day:0,//积分转换卡有效期
        inviteArr: [
          {
            direct_rate:null,//直推分佣比例
            indirect_rate:null, //间接分佣比例
          },
          {
            reward_type: [], //
            range_min: null, //【消费奖励】邀请人区间下限，最小值。（消费任务有此参数）
            range_max: null, //【消费奖励】邀请人区间上限，最大值。（消费任务有此参数）
            balance_num: "", //【消费奖励】邀请人 - 奖励金额（元）
            integral_num: "", //【消费奖励】邀请人 - 奖励积分（元）
            voucher_num: "", //【消费奖励】邀请人 - 奖励提货券（元）
            conversion_rate: "", //【消费奖励】邀请人 - 积分转提货券比例，百分比（例：1.5，代表1.5%，精确到二位小数）
          },
        ],
      });
    },
    //移除消费订单
    removeOrder(item) {
      var index = this.recruitingFrom.activity_rule.indexOf(item);
      if (index !== -1) {
        this.recruitingFrom.activity_rule.splice(index, 1);
      }
    },
    //订单数值改变
    numChange(currentValue, oldValue, order, index) {

      if (order.range_type == 1) {
        order.range_max = order.range_min;
      }
    },
    // 选择时间回调
    recruitingTimeChange(val) {
      this.recruitingFrom.start_time = val[0];
      this.recruitingFrom.end_time = val[1];
    },
    // 上传邀请海报回调
    posterBack(file) {
      this.poster = file;
      this.recruitingFrom.poster = file.url;
    },
    // 富文本回调
    editorclick(e) {
      this.recruitingFrom.explain = e;
    },
    // 最小值
    elInputNumberMin(item, index) {
      if (index == 0) {
        return 1;
      }
      if (this.recruitingFrom.activity_rule[index - 1] == 1) {
        return Number(
          this.recruitingFrom.activity_rule[index - 1].range_min + 1
        );
      } else {
        return Number(
          this.recruitingFrom.activity_rule[index - 1].range_max + 1
        );
      }
    },
    // 文本框聚焦执行
    FocusRow() {
      if (this.recruitingFrom.validity_period == 0) {
        this.recruitingFrom.validity_period = "";
      }
      this.$forceUpdate();
    },
    handleInput(){
      const regex = /^[0-9]*$/;
      if (!regex.test(this.recruitingFrom.validity_day)) {
        if (this.recruitingFrom.validity_day < 0) {
          this.recruitingFrom.validity_day = 0;
        }else{
          this.recruitingFrom.validity_day = this.recruitingFrom.validity_day.replace(/\D/g, '');
        }
        return
      }
    },
    // 文本框失焦执行
    BlurRow() {
      if (this.recruitingFrom.validity_period == "") {
        this.recruitingFrom.validity_period = 0;
        return;
      }
      if (Number(this.recruitingFrom.validity_period)) {
        this.recruitingFrom.validity_period = Number(this.recruitingFrom.validity_period);
      }
      this.$forceUpdate();
    },
    // 奖池商品
    goodsIdsRowWay(row) {
      this.reward_task_goods_ids_row = row;
    },
    // 奖池商品
    goodsIdsWay(row) {
      this.reward_task_goods_ids = row;
    },
    // 保存活动信息
    saveSubmit() {
      console.log(this.recruitingFrom)
      this.$refs.recruiting.validate((valid, error) => {
        if (valid) {
          let objForm = JSON.parse(JSON.stringify(this.recruitingFrom));
          objForm.appoint_area_select_json = JSON.stringify(
            objForm.appoint_area_select_json
          );
          objForm.appoint_group_select =
            objForm.appoint_group_select.toString();
          objForm.appoint_level_select =
            objForm.appoint_level_select.toString();
          objForm.appoint_tag_select = objForm.appoint_tag_select.toString();
          objForm.user_black = this.joinblackIds.toString();

          objForm.activity_rule.forEach((item) => {
            if (item.range_type == 1) {
              item.range_max = item.range_min;
            }
            item.inviteArr.forEach((items, index) => {
              items.range_max = item.range_max;
              items.range_min = item.range_min;
              if (index == 0) {
                item.direct_rate  = items.direct_rate,
                item.indirect_rate  = items.indirect_rate
              } else {
                item.range_max = items.range_max,
                item.range_min = items.range_min,
                item.balance_num = items.balance_num,
                item.conversion_rate = items.conversion_rate,
                item.integral_num = items.integral_num,
                item.voucher_num =items.voucher_num,
                item.reward_type = items.reward_type.join(",");
              }
            });

            delete item.inviteArr

          });
          this.$nextTick(() => {
            objForm.goods_ids = this.reward_task_goods_ids;
            if (this.id) {
              objForm.id = this.id;
            }

            this.loading = true;
            addNewSupplier(objForm).then((res) => {
              this.loading = false;
              if (res.code !== 200 || res.status !== 1) {
                this.$messages.error(res.msg);
                return;
              }
              this.$messages.success(res.data);
              this.closedinvitation();
            });
          });
        } else {
          for (var key in error) {
            this.$messages.error(error[key][0].message);
            break;
          }
          return false;
        }
      });
    },
  },
};
</script>
<style lang="scss" >
.drawer-layouts {
  /*1.显示滚动条：当内容超出容器的时候，可以拖动：*/
  .el-drawer__body {
    overflow: auto;
  }

  /*2.隐藏滚动条，太丑了*/
  .el-drawer__container ::-webkit-scrollbar {
    display: none;
  }

  .el-drawer__header {
    background-color: #409eff;
    color: #ffffff;
    padding: 10px 20px;
    margin-bottom: 10px;
  }

  .el-tabs--card {
    /*height: calc(100vh - 110px); */
    /* overflow-y: auto; */
  }

  // .el-tab-pane {
  //   height: calc(100vh - 110px);
  //   overflow-y: auto;
  // }

  //tabs
  .el-tabs__header {
    padding-left: 50px;
    margin: 0;
  }

  .el-tabs__item {
    padding: 0 40px;
  }

  .order-box {
    .el-tabs__nav-wrap::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 2px;
      background-color: #f4f4f4;
      z-index: 1;
    }
  }

  .el-tabs__nav-wrap::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background-color: #ffffff;
    z-index: 1;
  }

  .el-alert--warning.is-light .el-alert__description {
    color: #c77b04;
    font-size: 14px;
  }

  .form-box-item {
    .el-form-item__label {
      font-size: 14px;
      font-weight: 500;
      // width: 96px;
    }

    .el-input {
      width: 250px;
    }

    .el-upload-list--picture-card .el-upload-list__item {
      width: 100px;
      height: 100px;
    }

    .el-upload--picture-card {
      width: 100px;
      height: 100px;
      line-height: 110px;
    }
  }

  .numbox {
    .el-form-item__content {
      display: -webkit-inline-box;
    }

    .el-input {
      width: 130px !important;
    }
  }
}
</style>
<style lang="scss" scoped>
.blockquote-box {
  border-left: 4px solid #409eff;
  padding-left: 16px;
  margin: 16px 0;
  height: 40px;
  line-height: 40px;
  background: #fafafa;
  font-size: 16px;
}
.form_text {
        display: inline-block;
        font-size: 14px;
        font-weight: 500;
        color: #606266;
        margin-left: 8px;
}
.text-explain p{
  font-size:13px;
  color: #606266;
}

.form-box {
  margin: 0 20px;

  .form-box-item {
    padding-bottom: 10px;
    padding-right: 20px;
    font-size: 12px;
    color: #4c4c4c;

    .form-tip {
      font-size: 12px;
      color: #4c4c4c;

      .tip-key {
        font-weight: bold;
        text-decoration: underline;
      }
    }

    .form-product {
      display: flex;
      font-size: 12px;
      color: #ee3737;
    }

    .Instructions {
      background: #f6f6f6;
      border-radius: 4px;
      padding: 10px;
    }
  }

  .table-top {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;

    .table-top-left {
      display: flex;
      line-height: 30px;

      div {
        margin-right: 20px;
      }
    }

    .table-top-right {
      display: flex;

      div {
        margin-left: 20px;
      }
    }
  }

  .table-num {
    margin-left: 5px;
    background: #f0f0f0;
    width: 35px;
    border-radius: 5px;
  }

  .placard-box {
    .placard-title {
      font-size: 14px;
      color: #4893ff;
      width: 200px;
      text-align: center;
      margin-bottom: 10px;
    }

    .placard-tip {
      margin-top: 10px;
      width: 350px;
      color: #6c6c6c;
      line-height: 20px;
      font-size: 12px;
    }
  }

  .order-box {
    background: #f4f4f4;
    padding: 20px 10px;
    border-radius: 5px;
    margin-bottom: 20px;
  }
}

.button-box {
  margin-right: 30px;
  margin-bottom: 20px;

  .next-button {
    background-color: #eeeeee;
    color: #4c4c4c;
    height: 30px;
  }
}

.Instructions-important {
  color: #ee3737;
  font-weight: bold;
}
.text-red{
  color: #ee3737;
}

</style>
